如何把 Bootstrap 設定成 RWD 呢？（會隨著畫面縮放而改變排版）
文件網址：
https://getbootstrap.com/docs/4.3/layout/grid/#grid-options
如果要做「響應式」的話，要透過上面文件中 Grid options 的設定
觀念說明
- 中斷點：大於等於某一個數值，就會切換成「特定的版型」
Bootstrap 的 media queries
Bootstrap 中斷點，說明如下：
:::danger
「垂直的手機」在 Bootstrap 裡面，就是「預設的版型」--> 從「垂直的手機」作為起點開始寫
:::
- 大於等於 576px，會切換成「橫式的手機」版型
- 大於等於 768px，會切換成「平板」版型
- 大於等於 992px，會切換成「小的桌機」版型
- 大於等於 1200px，會切換成「大的桌機」版型
斷點與 col 的字根（要記住！！）
- 字根要記得使用正確！
:::success
「xs 省略」的意思是：
就直接寫col-*就可以了
:::
xs 說明
以下面的範例來做說明
html:
<div class="row">
<div class="col-sm-4 side-bar"></div>
<div class="col-sm-8 content"></div>
</div>
:::danger
[說明]
當小於 sm（寬度小於 576px）就會切換成 xs 的排版
- 因為上面程式碼中，==沒有設定
col-*，就會採用col-12「12 欄寬（預設就是寬度 100%）」==，來呈現欄寬（平常製作 RWD 時也不需要填入 col-x） - 若是有設定
col-*，就會依照設定的值，來呈現欄寬
:::
圖解說明
設定col-sm-*
當我使用col-sm-*時，會有什麼變化？
html:
<div class="row">
<div class="col-sm-4 side-bar"></div>
<div class="col-sm-8 content"></div>
</div>
- 當寬度「大於 sm 時」
是「兩欄式」的排版
- 當寬度「小於 sm 時」
就會切換成「單欄式」的排版
:::info
「4欄寬 + 8欄寬」會調整成「統一的 12 欄寬 （寬度 100%）」
:::
設定col-md-*
當我使用col-md-*時，會有什麼變化？
html:
<div class="row">
<div class="col-md-4 side-bar"></div>
<div class="col-md-8 content"></div>
</div>
- 當寬度「大於 md 時」
會是「兩欄式」的排版
- 當寬度「小於 md 時」
就會切換成「單欄式」的排版（寬度為 100%）
實際範例
設定col-sm-*
html:
<div class="container mt-3">
<!-- 兩欄式的排版 -->
<div class="row">
<div class="col-sm-6">
<div class="box"></div>
</div>
<div class="col-sm-6">
<div class="box"></div>
</div>
</div>
<hr>
<!-- 三欄式的排版 -->
<div class="row">
<div class="col-sm-4">
<div class="box"></div>
</div>
<div class="col-sm-4">
<div class="box"></div>
</div>
<div class="col-sm-4">
<div class="box"></div>
</div>
</div>
</div>
用 chrome 開發者工具來看
- 在「寬度 >= 576px」時
- 在「寬度 < 576px」時
就會切換成「單欄」的排版
大裝置「4欄」，小裝置「2欄」
html:
大裝置「4欄」：設定
col-md-3
在寬度 >= 768px 時，都會是「4欄」小裝置「2欄」：設定
col-sm-6
在寬度是 576~767px 時，都會是「2欄」
<div class="container mt-3">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6">
<div class="box"></div>
</div>
</div>
</div>
- 在寬度 >= 768px 時，都會是「4欄」
- 在寬度是 576~767px 時，都會是「2欄」
:::success
想要調整「上下的間距」
若要設定 col 的margin-top/bottom，應寫在哪個位置呢？
A:
在此只需要了解一個重點 - 不要調整水平的 margin
垂直部分可以使用 my-3 的方式調整
並且直接應用在 col-sm-6
my-3 的相關概念在後面通用類別會介紹到喔
:::
- 在寬度 < 575px 時，都會是「單欄」--> 是預設的
再加上col-4 （承接上面範例）
html:
<div class="container mt-3">
<div class="row">
<div class="col-md-3 col-sm-6 col-4">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-4">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-4">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-4">
<div class="box"></div>
</div>
</div>
</div>
- 在寬度 < 575px 時，都會是「3欄」
更多變化的排版
html:
在寬度 < 575px 時，設定
col-3col-3col-6col-12（寬度為 100%）
<div class="container mt-3">
<div class="row">
<div class="col-md-3 col-sm-6 col-3">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-3">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-6">
<div class="box"></div>
</div>
<div class="col-md-3 col-sm-6 col-12">
<div class="box"></div>
</div>
</div>
</div>
就可以設計出非常有變化性的排版：
- 在寬度 < 575px 時
className 有順序問題嗎？
class 中的撰寫順序是沒有差別的
而老師是習慣從大到小（從 md sm xs 寫下來）
當然你也可以依據自己或團隊需求做決定
這樣 className 不會太長嗎？
Q:
例如：
<div class="col-md-3 col-sm-6 col-3"></div>
這樣 className 不會太長嗎？
A:
這是與 CSS 架構概念有關
Bootstrap 的目的是為了增加每個 className 的可複用性
這個概念下，甚至能不再撰寫 CSS 就能完成畫面
過去我也會糾結於 Bootstrap 的 className 太多
但在實際開發過幾個網站後
會了解到這種概念是正確的
原因在於，沒有足夠可複用性的 className 連管理都會有問題
（每一段樣式都需要開一個新的 className，這樣其實失去 CSS 樣式表的意義）
:::danger
一般實務上，也不㑹將全部尺寸都放上去，只會用一兩個 ex: col-md-6
只有部分情境下，特定寬度排版沒那麼合適時，才額外增加中斷點調整
:::
Q&A
Q: 關於<div class="box"></div>
想請問在影片範例中的<div class="box"></div>，它只有套用自定義的 .box 的 css，而未套用 bootstrap 的col-*或是col-sm-*之類的 class 屬性，為何它也能自適應螢幕寬度去縮放呢?
A:
這是因為盒模型的特性，.box 本身就是 100% 寬度
Q: BS4 的 SCSS
在 bootstrap 文件中響應式斷點的地方
http://bootstrap.hexschool.com/docs/4.0/layout/overview/#responsive-breakpoints
有下面這些斷點，
這些不能直接寫在自己的 scss 裡套用嗎？
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
A:
下面這段就是他已經寫好的 @mixin，所以如果你有載入 BS4 的 SCSS，自然能使用他的 @mixin 哩
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
如果要載入 BS4 的 SCSS 是要載入哪個檔案呢？
這部分課程有的，在章節 11「Bootstrap 與 Sass」有說明該如何載入
- 但如果你沒有要自己修改 BS4 核心碼的話，就直接用他的 CSS，並照著文件上的 class 來寫就 ok 了
